<!DOCTYPE html>
<html>




	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div {
			width: 1200px;
			height: 500px;
			border: 0px solid;
		}
	</style>




	<body>
		<div class="div">
			<canvas id="myCanvas" width="1200" height="500" style="border: 1px solid;">
			
		</canvas>
		</div>
		<script type="text/javascript">
			//获取画布
			var canvas = document.getElementById("myCanvas");
			//创建画笔
			var ctx = canvas.getContext("2d");




			var rot = 0;
			var R = 100;
			var leftx = 100;
			var xzjd = 5;
			var huchang = 5 * Math.PI * R / 180;
			var juli = 330;
			setInterval(function() {
				var y = Math.sin(rot / 180 * Math.PI) * 0.5 * R;
				var x = Math.cos(rot / 180 * Math.PI) * 0.5 * R;




				ctx.clearRect(0, 0, 1200, 500);
				ctx.fillStyle = "papayawhip";
				ctx.fillRect(0, 0, 1200, 500);




				//第一个圆
				ctx.beginPath();
				ctx.arc(leftx, 400, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx, 400, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx - x, 400 - y, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "black"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx + x, 400 + y, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx - x, 400 - y, 0.1 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx + x, 400 + y, 0.1 * R, 0, 2 * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()
				ctx.closePath();




				//第二个圆
				ctx.beginPath();
				ctx.arc(leftx + juli, 400, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx + juli, 400, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx - x + juli, 400 - y, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "black"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx + x + juli, 400 + y, 0.5 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx - x + juli, 400 - y, 0.1 * R, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()




				ctx.beginPath();
				ctx.arc(leftx + x + juli, 400 + y, 0.1 * R, 0, 2 * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()
				ctx.closePath();




				//自行车车身
				ctx.beginPath();
				ctx.lineWidth = 9;
				ctx.moveTo(leftx, 400);
				ctx.lineTo(leftx + 50, 200);
				ctx.lineTo(leftx + 150, 400);
				ctx.lineTo(leftx + 300, 250);
				ctx.lineTo(leftx + juli, 400);
				ctx.lineTo(leftx + 150, 400);
				ctx.lineTo(leftx + 300, 250);
				ctx.lineTo(leftx + 50, 250);
				ctx.stroke();
				//方向盘




				ctx.beginPath();
				ctx.arc(leftx + 50, 200, 50, 0, 2 * Math.PI);
				ctx.closePath();
				ctx.stroke();




				ctx.beginPath();
				ctx.lineWidth = 9;
				ctx.moveTo(leftx + 300, 250);
				ctx.lineTo(leftx + 320, 220);




				ctx.stroke();




				ctx.beginPath();
				ctx.lineWidth = 9;
				ctx.moveTo(leftx + 270, 220);
				ctx.lineTo(leftx + 350, 220);




				ctx.stroke();
				
				ctx.beginPath();
				ctx.arc(leftx + 150, 400, 30, 0, 2 * Math.PI);
				ctx.closePath();
				ctx.stroke();
				ctx.closePath()
				
				
				




				rot = rot + huchang;
				leftx = leftx + huchang;
				if(leftx > 800 || leftx < 100) {
					huchang = -huchang;
					xzjd = -xzjd;
				}
			}, 100)
			
			
		</script>




	</body>




</html>